<template>
  <view class="pxc">
    <navigationBar
    style="height:63upx"
      :navigationBarStyle="navigationBarStyle"
      :showBack="false"
    ></navigationBar>
    <view class="pxc-top">
      <u-row gutter="16">
        <u-col span="3">
          <view class="title-date">
            <view class="title">Today</view>
            <Date></Date>
          </view>
        </u-col>
        <u-col span="9">
          <view class="swiper">
            <u-swiper :list="list"></u-swiper>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="ac-scroll-wrap">
      <view class="ac-scroll-item">
        <view class="scroll-item" @click="HandleHome">
          <view class="image"
            ><image src="/static/pxc/blog.png" mode="widthFix"></image
          ></view>
          <view class="title">博客</view>
        </view>
        <view
          class="scroll-item"
          @click="HandleNav('/pages/pxc/interview/interview')"
        >
          <view class="image"
            ><image src="/static/pxc/interview.png" mode="widthFix"></image
          ></view>
          <view class="title">面试题</view>
        </view>
        <view
          class="scroll-item"
          @click="HandleNav('/pages/pxc/wallpaper/wallpaper')"
        >
          <view class="image"
            ><image src="/static/pxc/wallpaper.png" mode="widthFix"></image
          ></view>
          <view class="title">壁纸</view>
        </view>
        <view class="scroll-item" @click="HandleNav('/pages/pxc/music/music')">
          <view class="image"
            ><image src="/static/pxc/music.png" mode="widthFix"></image
          ></view>
          <view class="title">音乐</view>
        </view>
        <view class="scroll-item" @click="HandleNav('/pages/pxc/video/video')">
          <view class="image"
            ><image src="/static/pxc/video.png" mode="widthFix"></image
          ></view>
          <view class="title">影视</view>
        </view>
        <view class="scroll-item" @click="HandleNav('/pages/pxc/links/links')">
          <view class="image"
            ><image src="/static/pxc/links.png" mode="widthFix"></image
          ></view>
          <view class="title">友链</view>
        </view>
      </view>
    </view>
    <view class="interview" style="margin: 20upx" v-if="examCateList.length">
      <view class="title-more flex-between">
        <view class="title">
          <image src="/static/pxc/icon-interview.png" mode="widthFix"></image>
          面试题总结
        </view>
        <view class="more">
          <navigator url="/pages/pxc/interview/interview">查看更多</navigator>
        </view>
      </view>
      <view class="interview-container">
        <view
          class="interview-item"
          @click="Nav(v.id)"
          v-for="(v) in examCateList.slice(0, 2)"
          :key="v.id"
        >
          <image :src="v.cover" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <view class="wallpaper" style="margin: 20upx" v-if="wallpaperList.length">
      <view class="title-more flex-between">
        <view class="title">
          <image src="/static/pxc/icon-wallpaper.png" mode="widthFix"></image>
          手机壁纸
        </view>
        <view class="more">
          <navigator url="/pages/pxc/wallpaper/wallpaper">查看更多</navigator>
        </view>
      </view>
      <view class="wallpaper-container">
        <view class="wallpaper-scroll-wrap">
          <view class="wallpaper-scroll-item">
            <view
              class="scroll-item"
              v-for="(v) in wallpaperList.slice(0,6)"
              :key="v.id"
              @click="previewImage(v)"
            >
              <view class="image"
                ><image :src="v.cover" mode="heightFix"></image
              ></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Recommend :recommendList="recommendList"></Recommend>
    <!-- <view
      class="tips"
      :style="{ top: stateHeight + navHeight + 'px', zIndex: 999 }"
      v-show="showTips"
    >
      <view class="tips-content flex">
        <image src="/static/icon/add-a.png" mode="widthFix"></image>
        <view class="title">
          将
          <text style="color: #8486f8; font-weight: 600">“前端知识”</text>
          添加到我的小程序，以后使用更方便
        </view>
        <view class="close" style="width: 40upx;">
          <image @click="showTips=!showTips" src="/static/pxc/close.png" mode="widthFix" style="width: 38upx;height: 38upx;margin-top: -20upx;"></image>
        </view>
      </view>
    </view> -->
    <!-- <ALoading v-show="aloading"></ALoading> -->
    <u-no-network></u-no-network>
    <view class="no-more" v-if="recommendList[0]">
      <u-loadmore :status="status" font-size="24" :load-text="loadText" />
    </view>
  </view>
</template>

<script>
import ALoading from "../../components/loading/loading.vue"
import navigationBar from "../../components/navigationBar/navigationBar"
import Recommend from "./components/recommend.vue"
import Date from "./components/date.vue"
import img2 from '../../static/3.jpg'
import wallpaper from "./wallpaper/wallpaper"
export default {
  components: { navigationBar, Recommend, Date, wallpaper,ALoading },
  data() {
    return {
      navigationBarStyle: {
        background: "#8486f8",
        iconText: "前端知识", //导航栏文字
      },
      loadText: {
        nomore: "我也是有底线的",
      },
      aloading: true,
      recommendList: [],
      examCateList: [],
      wallpaperList: [],
      navHeight: 0,
      stateHeight: 0,
      showTips: true,
      list: [
        {
          image: img2,
        },
        {
          image: img2,
        },
        {
          image: img2,
        },
      ],
    }
  },
  onShow() {
    this.getArticleListRecommend()
    this.getExamCateList()
    this.getWallpaperList()
    this.loading = false
  },
  methods: {
    previewImage(v) {
      let avatar = uni.getStorageSync("avatar")
      if (!avatar) {
        uni.navigateTo({
          url: "/pages/login/login",
        })
        return
      }
      uni.navigateTo({
        url: "/pages/pxc/wallpaper/detail/detail?image=" + v.cover,
      })
    },
    HandleHome() {
      uni.switchTab({
        url: "/pages/index/index",
      })
    },
    HandleNav(url) {
      let avatar = uni.getStorageSync("avatar")
      if (!avatar) {
        uni.navigateTo({
          url: "/pages/login/login",
        })
        return
      }
      uni.navigateTo({
        url,
      })
    },
    Nav(id) {
      let avatar = uni.getStorageSync("avatar")
      if (!avatar) {
        uni.navigateTo({
          url: "/pages/login/login",
        })
        return
      }
      console.log(id)

      uni.navigateTo({
        url: "/pages/pxc/interview/detail/detail?id=" + id,
      })
    },
    getArticleListRecommend() {
      let data = {
        status: 1,
        a_type: 4,
      }
      this.$store.dispatch("article/list", data).then(res => {
        this.recommendList = res.data
      })
    },
    getExamCateList() {
      let data = {
        status: 1,
      }
      this.$store.dispatch("exam/cateList", data).then(res => {
        this.examCateList = res.data
      })
    },
    getWallpaperList() {
      let data = {
        status: 1,
      }
      this.$store.dispatch("wallpaper/list", data).then(res => {
        this.wallpaperList = res.data
        console.log(res, 99)
      })
    },
  },
  mounted() {
    // let stateHeight = 0 //  接收状态栏高度
    // let navHeight = uni.getMenuButtonBoundingClientRect().height //  获取胶囊高度
    // let top = 0
    // uni.getSystemInfo({
    //   success(res) {
    //     stateHeight = res.statusBarHeight
    //   },
    // })
    // top = wx.getMenuButtonBoundingClientRect().top - stateHeight //  获取top值
    // this.navHeight = navHeight + top * 2
    // this.stateHeight = stateHeight
  },
}
</script>

<style lang="scss" scoped>
.pxc-top {
  margin: 10upx;
  .title-date {
    background: url(../../static/pxc/date-time.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 300upx;
    border-radius: 8upx;
    color: #ffffff;
    text-align: center;
    .title {
      font-size: 32upx;
      padding: 20upx 0 30upx 0;
      font-weight: 600;
    }
  }
  .swiper {
    // height: 80rpx;
    border-radius: 8rpx;
    background: #d3dce6;
  }
}
.ac-scroll-wrap {
  background-color: #fff;
  margin: 20upx;
  .ac-scroll-item {
    width: 80vw;
    margin: 0 auto;
    padding: 20upx;

    white-space: nowrap;
    overflow-y: auto;
    &::-webkit-scrollbar {
      background: none;
      background-color: #000;
    }
    .scroll-item {
      display: inline-block;
      border-radius: 20upx;
      margin-right: 44upx;
      text-align: center;
      .image {
        width: 10vw;
        height: 10vw;
      }
      .title {
        font-size: 24upx;
        line-height: 42upx;
        color: #666666;
      }
    }
  }
}

// 面试
.interview {
  .interview-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #fff;
    margin: 20upx 0;
    padding: 10upx;
    .interview-item {
      width: 48%;
      margin-bottom: 10upx;
      image {
        border-radius: 10upx;
      }
    }
  }
}
.wallpaper {
  .wallpaper-scroll-wrap {
    background-color: #fff;
    margin: 20upx 0;
    .wallpaper-scroll-item {
      margin: 0 auto;
      padding: 20upx;

      white-space: nowrap;
      overflow-y: auto;
      &::-webkit-scrollbar {
        background: none;
        // background-color: #000;
      }
      .scroll-item {
        display: inline-block;
        border-radius: 20upx;
        text-align: center;
        margin-right: 20upx;
        border-radius: 10upx;
        .image {
          width: 180upx;
          height: 400upx;
          border-radius: 10upx;
          image {
            width: 100%;
            height: 400upx;
            border-radius: 10upx;
          }
        }
      }
    }
  }
}
</style>
